<template>
	<view>
		<u-popup class="warn" v-model="show" mode="bottom" z-index="9999" border-radius="30" :closeable="true" close-icon-pos="top-left" close-icon="arrow-down" :safe-area-inset-bottom="true">
			<div class="title">加入预警<span class="warn-submit" @click="addWarn">预警</span></div>
			<div class="content">
				<div class="subtitle">预警类型</div>
				<scroll-view class="tag-list" :scroll-y="true" :show-scrollbar="true">
					<u-radio-group v-model="type" size="28">
						<u-radio shape="square" v-for="(item, index) in warnTags" :key="index" :name="item.id">{{item.title}}</u-radio>
					</u-radio-group>
				</scroll-view>
				<div class="subtitle">预警级别</div>
				<u-radio-group v-model="level" size="28">
					<u-radio shape="square" v-for="(item, index) in levels" :key="index" :name="item.value">{{item.name}}</u-radio>
				</u-radio-group>
				<div class="subtitle">预警推送内容</div>
				<u-input class="textarea" v-model="warnText" type="textarea" height="400" />
				<div class="bottom flex">
					<span @click="reset">重置</span>
				</div>
			</div>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { addAlert, warnTagList } from "@/api/subject.js";
export default {
	props: {
		id: {
			type: [String, Number],
			default: "",
		},
		subjectId: {
			type: [String, Number],
			default: "",
		},
		isWarn: {
			type: Boolean,
			default: false,
		},
		text: {
			type: String,
			default: "",
		},
		text_tmp: {
			type: String,
			default: "",
		},
	},
	data() {
		return {
			type: "",
			level: 3,
			levels: [
				{ name: "一般", value: 1 },
				{ name: "严重", value: 2 },
				{ name: "重大", value: 3 }
			],
			warnTags: []
		}
	},
	computed: {
		show: {
			get() {
				return this.isWarn;
			},
			set(value) {
				this.$parent.isWarn = value;
			}
		},
		warnText: {
			get() {
				return this.text;
			},
			set(value) {
				this.$parent.warnText = value;
			}
		},
	},
	mounted() {
		warnTagList({type: 2, page: 1, limit: 100}).then(({data})=>{
		  this.warnTags = data.list;
		});
	},
	methods: {
		addWarn() {
			addAlert({
				id: [this.id],
				summary: this.warnText,
				subject_id: [this.subjectId],
				warn_tag: this.type,
				warn_level: this.level
			}).then(({code})=>{
				if(code == 200){
					this.$emit("close");
					this.$refs.uToast.show({
						title: "加入预警成功",
						type: "success",
					});
				}
			});
		},
		reset() {
			this.$emit("close");
			this.type = "";
			this.level = 3;
			this.warnText = this.text_tmp;
		},
	}
}
</script>

<style lang="scss" scoped>
.title{
	margin-top: 10rpx;
	text-align: center;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 32rpx;
	font-weight: bold;
	position: relative;
	z-index: 1;
	border-bottom: 2rpx solid #eee;
	
	.warn-submit{
		position: absolute;
		z-index: 1;
		right: 40rpx;
		color: #E60012;
	}
}
.content{
	padding: 30rpx;
	.subtitle{
		font-size: 24rpx;
		color: #999;
		margin-top: 40rpx;
		margin-bottom: 10rpx;
		&:first-child{
			margin-top: 0;
		}
	}
	.bottom{
		justify-content: flex-end;
		color: #666;
	}
}
.tag-list{
	max-height: 350rpx;
}
</style>